<div [formGroup]="projectInfoForm">
  <mat-form-field class="full-width-input">
    <mat-label>Project Name</mat-label>
    <input #projectNameInput matInput placeholder="Please provide the name without spaces as this will be used by the task providers as an identifier"
      formControlName="name" required (input)="onNameChanged(projectNameInput.value)">
    <mat-error *ngIf="isFieldInvalid('name', 'required')">
      Please inform the project name
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <mat-label>Project Display Name</mat-label>
    <input matInput placeholder="The project display name used as the project label" formControlName="displayName">
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <mat-label>Project Client</mat-label>
    <input matInput placeholder="The name of the client" formControlName="client">
  </mat-form-field>
</div>
